<template>
  <a-modal
    :title="title"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="modal-page"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-page-warp"
    style="top:10%;height: 85%;overflow-y: hidden">
    <simple-table-page ref="templatePage" :agilePageCode="agilePageCode" :showSearch="false" :queryParam="queryParam"></simple-table-page>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import JDate from '@/components/jeecg/JDate'
  export default {
    name: "ModalPage",
    components: {
      JDate
    },
    props: {
      columns: {
        type: Array,
        required: false
      },
      primaryKey: {
        type: String,
        required: false,
        default: "id",
      },
      dictValues: {
        type: Object,
        required: false,
        default(){
          return {}
        }
      },
      template: {
        type: String,
        required: true,
        default (){
          return "SimplateTablePage"
        }
      },
      title: {
        type: String,
        required: false,
        default (){
          return "操作"
        }
      },
      agilePageCode: {
        type: String,
        required: true,
      },
      queryParam: {
        type: Object,
        required: false,
        default(){
          return {}
        }
      }
    },
    computed:{
    },
    data () {
      return {
        visible: false,
        modalWidth: '85%',
        drawerWidth:700,
        isReadOnly: false,
        opType: 'add',
        disableSubmit:false,
        dateFormat:"YYYY-MM-DD",
        validatorRules:{
          loginName:{
            rules: [{
              required: true, message: '请输入登录名称!'
            }]
          },
          username:{
            rules: [{
              required: true, message: '请输入用户姓名!'
            }]
          },
          roleId:{
            rules: [{
              required: true, message: '请选择角色!'
            }]
          }
        },
        uploadLoading:false,
        confirmLoading: false,
        form:this.$form.createForm(this)
      }
    },
    created () {
    },
    methods: {      
      getDictValues(field){
        if(field.dataSourceType == 'DICT' || field.dataSourceType == 'ENUM' || field.dataSourceType == 'TABLE_COLUMN'){
          const ss = field.dataSourceTypeParam.split(".");
          if(ss.length <= 3){            
            return this.dictValues[ss[0]];
          }else{
            return this.dictValues[field.dataSourceTypeParam];
          }
        }
      },
      getDictValue(dict, text){
        if(!text){return;}
        text = text + "";
        const vs = this.dictValues[dict];
        if(vs){
          for(var v =0; v < vs.length; v++){
            if(vs[v].valueCode == text){
              return vs[v].valueName;
            }
          }
        }
      },
      calcScale(scale){
        var d = 1;
        if(scale > 0){
          for(var i=0;i<scale; i++){
            d = d/10;
          }
        }else if(scale < 0){
          scale = scale * 1;
          for(var i=0; i<scale; i++){
            d = d * 10;
          }
        }
        return d;
      },
      add () {
        this.edit();
      },
      show(pageData){
        var that = this;       
        if(pageData){
            if(pageData.agilePageCode){
                this.agilePageCode = pageData.agilePageCode
            }
            if(pageData.queryParam){
                this.queryParam = pageData.queryParam
            }
        }
        if(this.$refs.templatePage && this.$refs.templatePage.reloadData){
          this.$refs.templatePage.reloadData(pageData).then((res)=>{
              that.visible = true;
          })
        }else{
          that.visible = true;
        }
        
      },      
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },      
      handleCancel() {
        this.close()
      },      
      isEditable(column){
        const opType = this.opType;
        if(opType == 'add'){
          return column.insertable
        }else if(opType == 'edit'){
          return column.updateable
        }
        return false
      }
    }
  }
</script>

<style scoped>
.readOnly{border: none;box-shadow: none;background-color: #f0f0f0;}
.required lable{color: red;}
.ant-input-number{width: 100%;}
.ant-card-body{padding: 5px;}
</style>
<style>
.modal-page .ant-card-body{padding: 5px;}
.ant-modal-page-warp .modal-page .ant-modal-body{padding: 0;height:100%}
.ant-modal-body .ant-row{margin-left: 0;margin-right: 0;}
</style>